<template>
  <div class="shujixq">
    <div class="booktop">
      <div class="top">
        <div class="top1">
          <div class="imgs " @click="fanhui()">
            <img src="../../assets/images/logon.png" alt="" />
          </div>
          <div class="lefts">
            <div></div>
            <div class="lefts1">浙江省非物质文化<br />数字文献中心</div>
            <div class="lefts2">
              ZhejiangProvinceIntangibleCultureDigitalLiteratureCenter
            </div>
          </div>
          <div class="rights">
            <div></div>
            <div class="ris1">
              <!-- <div class="ri">会员</div>
              <div class="ri">帮助</div>
              <div class="ri">我的</div> -->
              <div class="ri">&emsp;&emsp;</div>
              <div class="ri">&emsp;&emsp;</div>
              <!-- <div class="ri" style="cursor: pointer" @click="touser()">我的</div> -->
              <!-- <div class="ri">
                 <el-dropdown @command="handleCommand" trigger="click">
                  <span class="el-dropdown-link" style="cursor: pointer">
                    <span
                      style="
                        font-size: 18px;
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        color: #333333;
                      "
                      >欢迎
                    </span>
                    <span style="padding-left: 12px; font-size: 16px">
                      {{ yhm.yhm }}
                    </span>
                    <i
                      class="el-icon-arrow-down el-icon--right"
                      style="font-size: 14px"
                    ></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click="tologin()">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div> -->
              
            </div>
            <div class="ris3">
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
                style="width: 100%; display: flex; height: 56px"
              >
                <el-form-item
                  style="width: 382px; height: 56px; margin-bottom: 0"
                >
                  <el-input
                    v-model="formInline.user"
                    placeholder="输入关键词搜索"
                    style="width: 382px; height: 56px"
                  >
                    <img
                      slot="append"
                      src="../../assets/images/sousuo.png"
                      alt=""
                    />
                  </el-input>
                  <!-- <el-input placeholder="输入关键词搜索" v-model="formInline.user" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="sousuos()"></el-button>
                        </el-input> -->
                </el-form-item>
                <el-form-item>
                  <div style="padding-left:20px;margin-top: 7px;cursor: pointer;" @click="onSubmit()">
                    <div style=" display: flex;align-items: center;height:100%;font-size: 18px;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #911f23">高级检索 <i style="font-size:18px;font-weight:550" class="el-icon-arrow-right"></i></div>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <div class="ris2" v-if="showLogin">
              <div class="login">登录</div>
              <el-form ref="form" :model="formLogin">
                <el-form-item>
                  <div class="i1" :class="activet == 0 ? 'i1' : 'i2'">
                    <el-input
                      v-model="formLogin.name"
                      placeholder="请输入账号"
                      @blur="handleBlur"
                      @focus="handleFocus"
                    >
                      <i
                        slot="prefix"
                        class="el-input__icon el-icon-user"
                        style="font-size: 20px"
                        v-if="activet == 0"
                      ></i>
                      <i
                        slot="prefix"
                        class="el-input__icon el-icon-user"
                        style="font-size: 20px; color: #333333"
                        v-else
                      ></i>
                    </el-input>
                    <div class="zh">账号</div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="i1" :class="activet1 == 0 ? 'i1' : 'i2'">
                    <el-input
                      v-model="formLogin.padd"
                      placeholder="请输入密码"
                      @blur="handleBlur1"
                      @focus="handleFocus1"
                    >
                      <i
                        slot="prefix"
                        class="el-input__icon el-icon-lock"
                        style="font-size: 20px"
                        v-if="activet1 == 0"
                      ></i>
                      <i
                        slot="prefix"
                        class="el-input__icon el-icon-lock"
                        style="font-size: 20px; color: #333333"
                        v-else
                      ></i>
                    </el-input>
                    <div class="zh">密码</div>
                  </div>
                </el-form-item>
              </el-form>
              <div class="submit">登录</div>
              <div class="fts">
                <div class="fts1">立即注册</div>
                <div class="fts2">忘记密码</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="booktop1">
      <div class="book1">
        <div class="booklt" >
          <img src="../../assets/images/disc.png" alt="" />
          <i></i>
        </div>
        <div class="bookri">
          <div class="shuming">{{yxxqlist.lymc}}</div>
          <div class="xin1">
            
            <div>格式：{{yxxqlist.lygs}}</div>
            <!-- <div class="xin331"  @click="shoucang(57, yxxqlist.lyid, yxxqlist.lymc, yxxqlist)"  v-if="yxxqlist.sfsc == 0">
                <img src="../../assets/images/s1.png" alt="" />
                <div>收藏<span></span></div>
            </div>
            <div class="xin331"  @click="qxshoucang(57, yxxqlist.lyid, yxxqlist)" v-else>
                <img src="../../assets/images/s2.png" alt="" />
                <div>收藏<span></span></div>
            </div> -->
          </div>
          <div class="xin2">
            <!-- <div class="download" @click="up(yxxqlist.lybfdz)">
              <i></i>
              免费下载
            </div> -->
            <div class="xin33">
              <!-- <div class="xin331">
                <img src="../../assets/images/s1.png" alt="" />
                <div>收藏<span></span></div>
              </div> -->

              <!-- <div class="xin331">
                <img src="../../assets/images/like.png" alt="" />
                <div>165549<span>|</span></div>
              </div>
              <div class="xin331">
                <div class="xin331">
                  <img src="../../assets/images/f1.png" alt="" />
                  <div>15423</div>
                </div>
              </div> -->
            </div>
          </div>
          <div class="xin3">
            <div class="xin3_item">来源：{{yxxqlist.lycldx}}</div>
            <div class="xin3_item">时间：{{yxxqlist.lysj}}</div>
            <!-- <div class="xin3_item">授权对象：个人,企业</div>
            <div class="xin3_item">
              授权证书：<a href="javascript:">下载授权证书</a>
            </div> -->
          </div>
        </div>
         <!-- <audio controls ref="audio" class="aud">
            <source src="../static/audio/pojun1.mp3" />
          </audio> -->
      </div>
      <!-- <div class="tag">
        <div class="tag_box">
          <div class="tag_list">
            <span>标签</span>
            <span>标签</span>
          </div>
        </div>
      </div> -->
    </div>
    <div class="xgsjtt">
      <div class="title">
        <div class="xian"></div>
        <div class="wenzi">音频推荐</div>
      </div>
      <div class="audio_list">
        <div class="audio_item" v-for="(item,index) in yxtjList" :key="item.lyid" @click="toyinpinxq(item.lyid,59)">
          <div class="img">
            <img src="../../assets/images/disc.png" alt="" />
            <i></i>
          </div>
          <div class="right">
            <div class="right_wrap">
              <div class="top">
                <div class="title">{{item.lymc}}</div>
                <!-- <div class="download">
                  <i></i>
                  立即下载
                </div> -->
              </div>
              <!-- <div class="tag">
                <span>标签1</span>
                <span>标签2</span>
              </div> -->
            </div>
            <div class="bottom" style="font-size:12px;color:#666;display: flex;justify-content: space-between;">
              格式：{{item.lygs}}
              <span style="padding-left:20px">来源时间：{{item.lysj}}</span>
              <!-- <el-progress
                :percentage="1"
                :color="'#911F23'"
                :define-back-color="'#EEEEEE'"
                :format="format"
              ></el-progress> -->
            </div>
          </div>
        </div>
        
      </div>
    </div>
    <div class="correlation_search">
      <!-- <div class="correlation_search_wrap">
        <div class="title">相关搜索</div>
        <div class="tag">
          <span>标签1</span>
          <span>标签2</span>
        </div>
      </div> -->
    </div>
    <footbtn></footbtn>
  </div>
</template>
<style scoped  lang="scss">
::v-deep .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #f3ebeb;
    color: #911F23;
    
}
::v-deep .el-input {
  display: flex;
  justify-content: center;
  color: #333333;
}
::v-deep .el-input--prefix .el-input__inner {
  width: 305px;
  border: 0px;
}
//搜索框
::v-deep .el-input-group > .el-input__inner {
  height: 56px;
  border: 0px;
}
::v-deep .el-input-group__append {
  border: none !important;
  background-color: #fff;
  padding: 0 45px 0 10px;
}
::v-deep .el-input-group__append img {
  width: 32px;
  height: 32px;
  padding-top: 12px;
  cursor: pointer;
}
::v-deep .el-button--primary {
  background-color: #911f23;
  border-color: #911f23;
  border-radius: 8px;
  height: 56px;
  width: 112px;
  margin-left: 16px;
}
::v-deep .el-form--inline .el-form-item {
  margin-right: 0;
}

.shujixq {
  width: 100%;
  background-color: #f7f7f8;
  .booktop {
    width: 100%;
    height: 200px;
    background: url("../../assets/images/booktop.png") no-repeat;
    background-size: 100% 100%;
    .top {
      width: 1400px;
      height: 176px;
      margin: 0 auto;
      // background-color: #F7F7F8;
      .top1 {
        position: relative;
        width: calc(100% - 0px);
        margin: 0 auto;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: pink;
        .imgs {
          position: absolute;
          top: 0;
          width: 138px;
          height: 176px;
          z-index: 100;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .lefts {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          margin-left: 170px;
          .lefts1 {
            font-size: 24px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #333333;
            // line-height: 35px;
          }
          .lefts2 {
            font-size: 14px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #666666;
          }
        }
        .rights {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: space-between;
          // padding-bottom: 40px;
          height: 100%;
          .ris1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 18px;
            width: 362px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #3d3d3d;
            margin-top: 0px;
          }
          .ris2 {
            position: absolute;
            top: 90px;
            width: calc(362px - 48px);
            height: 290px;
            background: #ffffff;
            box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.2);
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            z-index: 20;
            padding: 24px;
            .login {
              width: 100%;
              text-align: center;
              font-size: 24px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #333333;
              padding-bottom: 24px;
            }
            .i1 {
              position: relative;
              width: 100%;
              height: 46px;
              background: url("../../assets/images/inputs.png") no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              .zh {
                position: absolute;
                top: -20px;
                left: 30px;
                font-size: 12px;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #999999;
              }
            }
            .i2 {
              position: relative;
              width: 100%;
              height: 46px;
              background: url("../../assets/images/inputs1.png") no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              .zh {
                position: absolute;
                top: -20px;
                left: 30px;
                font-size: 12px;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #333333;
              }
            }
            .submit {
              width: 100%;
              height: 46px;
              background: #911f23;
              border-radius: 8px 8px 8px 8px;
              opacity: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 18px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #ffffff;
            }
            .fts {
              width: 100%;
              display: flex;
              justify-content: space-between;
              margin-top: 10px;
              font-size: 12px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              .fts1 {
                color: #911f23;
                cursor: pointer;
              }
              .fts2 {
                color: #cccccc;
                cursor: pointer;
              }
            }
          }
          .ris3 {
            // width: 362px;
            // margin-top: 37px;
          }
          .ri {
            padding-right: 30px;
          }
          .ri1 {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 68px;
            height: 38px;
            background: #911f23;
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }
  }
  .booktop1 {
    width: 100%;
    background-color: #fff;
    padding: 32px 0;
    .book1 {
      width: 1400px;
      margin: 0px auto;
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      padding: 48px 0;
      border: 1px solid #d8d8d8;
      display: flex;
      .booklt {
        width: 246px;
        height: 246px;
        margin-left: 56px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        i {
          width: 80px;
          height: 80px;
          background: url("../../assets/images/play.png") no-repeat;
          display: block;
          background-size: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          cursor: pointer;
        }
      }
      .bookri {
        width: calc(100% - 387px);
        padding-left: 32px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .shuming {
          font-size: 34px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #3d3d3d;
        }
        .xin1 {
          width: 100%;
          display: flex;
          align-items: center;
          font-size: 16px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #666666;
          .xin331 {
              display: flex;
              font-size: 12px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #999999;
              padding-left: 16px;
              img {
                width: 16px;
                height: 16px;
                padding-right: 4px;
              }
              span {
                padding: 0 8px;
              }
            }
        }
        .xin2 {
          display: flex;
          align-items: center;
          padding-bottom: 24px;
          border-bottom: 1px solid #e5e5e5;
          .download {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 160px;
            height: 46px;
            background: #911f23;
            border-radius: 6px;
            font-size: 18px;
            font-weight: 500;
            color: #ffffff;
            cursor: pointer;
            i {
              width: 20px;
              height: 20px;
              background: url("../../assets/images/downloadWhite.png") no-repeat;
              display: block;
              background-size: 100%;
              margin-right: 4px;
            }
          }
          .xin33 {
            display: flex;
            padding-left: 16px;
            .xin331 {
              display: flex;
              font-size: 12px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #999999;
              img {
                width: 16px;
                height: 16px;
                padding-right: 4px;
              }
              span {
                padding: 0 8px;
              }
            }
            .xin332 {
              width: 1px;
              height: 16px;
              background-color: #d8d8d8;
              margin: 0 8px;
            }
          }
        }
        .xin3 {
          display: flex;
          .xin3_item {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            line-height: 22px;
            padding-right: 48px;
            a {
              color: #911f23;
            }
          }
        }
      }
    }
    .tag {
      margin-top: 16px;
      .tag_box {
        width: 1400px;
        margin: 0 auto;
        .tag_list {
          span {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            border-radius: 4px;
            border: 1px solid #e5e5e5;
            padding: 3px 10px;
            margin-right: 12px;
          }
        }
      }
    }
  }
  .xgsjtt {
    width: 1400px;
    margin: 32px auto 10px;
    .title {
      width: 100%;
      display: flex;
      align-items: center;
      .xian {
        width: 12px;
        height: 24px;
        background: #911f23;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
      }
      .wenzi {
        margin-left: 12px;
        font-size: 22px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #3d3d3d;
      }
    }
    .audio_list {
      margin-top: 24px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .audio_item {
        width: 690px;
        height: 148px;
        background: #ffffff;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.04);
        border-radius: 4px;
        display: flex;
        margin-bottom: 20px;
        cursor: pointer;
        .img {
          position: relative;
          width: 100px;
          height: 100px;
          border-radius: 4px;
          padding: 24px;
          img {
            width: 100%;
            height: 100%;
          }
          i {
            width: 48px;
            height: 48px;
            background: url("../../assets/images/play.png") no-repeat;
            display: block;
            background-size: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
          }
        }
        .right {
          width: calc(690px - 148px);
          padding: 24px 24px 24px 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .top {
            display: flex;
            .title {
              font-size: 18px;
              font-weight: 400;
              color: #3d3d3d;
            }
            .download {
              min-width: 100px;
              height: 32px;
              border-radius: 4px;
              border: 1px solid #911f23;
              font-size: 14px;
              font-weight: 400;
              color: #911f23;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              i {
                width: 17px;
                height: 17px;
                background: url("../../assets/images/download.png") no-repeat;
                display: block;
                background-size: 100%;
                margin-right: 4px;
              }
            }
          }
          .tag {
            margin-top: 8px;
            span {
              font-size: 12px;
              font-weight: 400;
              color: #666666;
              background: #f6f6f6;
              border-radius: 4px;
              padding: 3px 10px;
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
  .correlation_search {
    margin-bottom: 170px;
    .correlation_search_wrap {
      width: 1400px;
      margin: 0 auto;
      .title {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        margin-bottom: 16px;
      }
      .tag {
        span {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          border-radius: 4px;
          border: 1px solid #e5e5e5;
          padding: 3px 12px;
          margin-right: 12px;
        }
      }
    }
  }
}
</style>

<script>
 import {gettuichu,getyxxq ,getyxtj,getsc,
  getqxsc, } from "@/api/api.js";
import footbtn from "../../components/foot/index.vue";
export default {
  data() {
    return {
      formLogin: {
        name: "",
        padd: "",
      },
      showLogin: false,
      activet: 0,
      activet1: 0,
      formInline: {
        user: "",
      },
      id:0,
      lx:0,
      yxxqlist:{},
      mc:'',
      yxtjList:[],
      yhm:{}
    };
  },
  created() {
    this.yhm = JSON.parse(sessionStorage.getItem("loginInfo"))?JSON.parse(sessionStorage.getItem("loginInfo")):""
    this.mc = sessionStorage.getItem("sousuo");
    this.id = this.$route.query.id
    this.lx = this.$route.query.lx
  },
  mounted() {
    // this.drawChart()
    this.yxxq()
    
  },
  methods: {
     touser(){
      const {href} = this.$router.resolve({ path: "/sc", query: {} });
      window.open(href, '_blank');
    },
     async shoucang(lx, id, mc, item) {
      let res = await getsc({
        lx: lx,
        zyid: id,
        zymc: mc,
        yhid: this.yhm.id,
      });
      if (res.code == 0) {
        this.scs = id;

        this.$message({
          message: "收藏成功",
          type: "success",
        });
        return (item.sfsc = 1);
      } else {
        this.$message.error(res.msg);
      }
    },
    async qxshoucang(lx, id, item) {
      let res = await getqxsc({
        zylx: lx,
        zyid: id,
        yhid: this.yhm.id,
      });
      if (res.code == 0) {
        this.$message({
          message: "取消收藏成功",
          type: "success",
        });
        item.sfsc = "0";
      } else {
        this.$message.error(res.msg);
      }
    },
     toyinpinxq(id,lx) {
      const {href} = this.$router.resolve({ path: "/audio", query: { id: id ,lx:lx} });
      window.open(href, '_blank');
      // this.$router.push({ path: "/audio", query: { id: id,lx:lx } });
    },
    async yxtj(){
       let res = await getyxtj({
         ly:this.yxxqlist.lymc?this.yxxqlist.lymc:this.yxxqlist.lyly

      });
      this.yxtjList = res
    },
    fanhui() {
      sessionStorage.setItem("erjsnav", 3);
      sessionStorage.setItem("sousuo", this.mc);
      this.$router.push({
        path: "/s6",
        query: {},
      });
    },
    up(url){
      window.open(url)
    },
    async yxxq(){
     let res = await getyxxq({
        id: this.id,
        type:this.lx
      });
     
      this.yxxqlist = res;
      this.yxtj()
    },
    async handleCommand(command) {
      let res = await gettuichu()
      sessionStorage.removeItem("loginInfo")
      this.$router.push("/");
    },
    format(val) {
      return '2:52'
    },
    sousuos() {
      if (this.formInline.user == "") {
        this.$message.error({ message: "请输入搜索内容!", center: true });
      };
    },
    onSubmit() {
      // sessionStorage.setItem("erjsnav", 3);
      sessionStorage.setItem("erjsnav", 0);
      this.$router.push({
        path: "/retrieval",
        query: {},
      });
    },
    logins() {
      this.showLogin = !this.showLogin;
    },
    handleBlur() {
      this.activet = 0;
    },
    handleFocus() {
      this.activet = 1;
    },
    handleBlur1() {
      this.activet1 = 0;
    },
    handleFocus1() {
      this.activet1 = 1;
    },
  },
  computed: {},
  components: {
    footbtn,
  },
};
</script>
